<template>
	<view class="applicationTenant_container">
		<view class="mail_List">
			<view class="mail" style="font-weight: 700;">
				<view class="order" v-if="current==1">租客查询</view>
				<view class="order" v-if="current==2||current==3">租客详情</view>
			</view>
		</view>
		<view class="icon">
			<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
		</view>
		<u-search :placeholder="placeholder" v-model="nameOrPhone" :show-action=false margin='30rpx' @change="search"
			></u-search>
		<view>
			<uni-card class="second_card" style="margin: 0;" v-if="current==1">
				<u-cell-group :border="false" v-for="(item,index) in application" :key=index>
					<u-cell-item title="租客" arrow-direction="right">
						<u-cell-item :arrow="false" :border-bottom="false" :title="item.tenantName" @click="owner(item.tenantId)">
						</u-cell-item>
					</u-cell-item>
				</u-cell-group>
			</uni-card>
			<uni-card class="second_card" style="margin: 0;" v-if="current==2">
				<u-cell-group :border="false">
					<u-cell-item title="租客" arrow-direction="right">
						<u-cell-item :arrow="false" :border-bottom="false" :title="searchOwners.tenantName" @click="searchData(nameOrPhone)">
						</u-cell-item>
					</u-cell-item>
				</u-cell-group>
			</uni-card>
		</view>
		<!-- 弹框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				placeholder: '请输入租客姓名/手机号',
				current: 1,
				return: 1,
				// 所有展示数据
				application:'',
				// 搜索内容
				nameOrPhone: '',
				// 搜索展示数据
				searchOwners: '',
				loginId:''
			}
		},
		onLoad() {
			// 展示全部数据
			this.getAllTenants()
		},
		methods: {
			// search() {
			// 	this.keyword = '赵子龙'
			// 	this.current = 2
			// },
			owner(val) {
				console.log(val)
					uni.navigateTo({
						url: `/pagesA/application/applicationTenant/tenantDetails/tenantDetails?tenantId=${val}`
					});
			},
			navigateBack() {
				if (this.current == 2) {
					this.current =1,
					this.keyword=''
				} else {
					if (this.current == 1) {
						uni.navigateBack()
					}
				}
			},
			// 展示全部数据
			getAllTenants() {
				this.loginId = uni.getStorageSync("setModel")
				this.$http.get('informationInquiry/selectTenantList',{loginId:this.loginId.userId}).then(res => {
					console.log(res, '课程分类')
					this.application = res.data
				})
			},
			// 改变搜索框内容触发
			search() {
				// console.log(this.nameOrPhone, 1)
				const self = this;
				// 清空搜索框展示所有数据
				if (this.nameOrPhone == '') {
					console.log(self.nameOrPhone, 2)
					self.getAllTenants()
					
					self.current = 1
				} else {
					console.log(333)
					// 搜索框防抖功能
					if(this.nameOrPhone !='') {
						clearTimeout(self.timer);
					}
					self.timer = setTimeout(() => {
						// 根据条件搜索数据
						this.$http.get('informationInquiry/tenantInformation', {
							nameOrPhone: this.nameOrPhone,
							loginId:this.loginId.userId
						}).then(res => {
							if (res.code == 200) {
								console.log(res, '课程分类')
								this.searchOwners = res.data
								this.current = 2
							} else {
								this.current = 3
								this.$refs.uToast.show({
									title: res.msg,
								})
								console.log(res)
							}
						})
					}, 500)
			
				}
			},
			searchData(value) {
				uni.navigateTo({
					url: `/pagesA/application/applicationTenant/tenantDetails/tenantDetails?nameOrPhone=${value}`
				});
				console.log(value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.applicationTenant_container {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				height: 160rpx;
				line-height: 230rpx;
				color: #fff;
				font-size: 40rpx;
				background-color: #2a4f65;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 96rpx;
			left: 20rpx;
		}

		/deep/.u-search {
			margin: 30rpx 30rpx 0 30rpx !important;
		}

		/deep/.second_card {

			.uni-card {
				z-index: unset;
				margin: 24rpx 0;
			}

			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 14rpx 24rpx;
			}

			.uni-card__content {
				padding: 0 10rpx !important;
			}
		}
	}
</style>
